.logo {
	fill: var(--color-accent-1);
}
.warning-container {
	background-color: rgba(var(--color-orange-rgb), 0.1);
	padding: 12px;
	border-radius: var(--radius-m);
	margin: 8px 0 0;
	font-size: var(--font-ui-smaller);
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	.warning-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgb(var(--color-orange-rgb));
	}
}

#settings {
	margin: 0 auto;
	padding: 0;
	height: 100vh;
	overflow: hidden;

	#settings-container {
		display: flex;
		height: 100%;
	}
	#content {
		flex-grow: 1;
		overflow: scroll;
	}

	h2 {
		margin-top: 0;
	}

	#navbar {
		display: none;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 max(6%,20px);
		height: 40px;
		border-bottom: 1px solid var(--background-modifier-border);
		#navbar-title {
			font-weight: 600;
			font-size: var(--font-ui-medium);
			flex-grow: 1;
			display: flex;
			align-items: center;
			gap: 6px;
			svg {
				height: 20px;
			}
		}
	}

	.hamburger-menu {
		display: none;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		margin-left: auto;
		width: auto;
		box-shadow: none;
	}

	.hamburger-icon {
		display: block;
		width: 20px;
		height: 2px;
		background-color: var(--text-muted);
		position: relative;

		&::before,
		&::after {
			content: '';
			left: 0;
			position: absolute;
			width: 20px;
			height: 2px;
			background-color: var(--text-muted);
			transition: transform var(--duration-fast) ease, top var(--duration-fast) ease;
		}
		&::before {
			top: -6px;
		}
		&::after {
			bottom: -6px;
		}
	}

	&.is-active {
		.hamburger-icon {
			background-color: transparent;

			&::before,
			&::after {
				top: 0;
			}
			&::before {
				transform: rotate(45deg);
			}
			&::after {
				transform: rotate(-45deg);
			}
		}
	}
}

.settings-section {
	display: none;
	flex-direction: column;
	gap: 8px;
	margin: 24px max(6%, 24px) 72px max(6%, 24px);

	&.active {
		display: block;
	}

	form {
		> div {
			margin-bottom: 3rem;
		}
	}
}

@media (min-width: 769px) {
	.settings-section {
		max-width: 600px;
	}
}

.settings-section-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
}

.settings-section-actions {
	display: flex;
	flex-direction: row;
	gap: 8px;
}

.setting-item {
	margin: 1.5rem 0;
	&.mod-horizontal {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		border-bottom: 1px solid var(--background-modifier-border);
		padding: 0.75rem 0 0.75rem;
		margin: 0;
		+ .setting-item {
			margin-top: 0;
		}
		.setting-item-description {
			margin: 0.25rem 0;
		}
		.setting-item-info {
			font-size: var(--font-ui-small);
			label {
				margin: 0;
				font-weight: 400;
				.is-mobile & {
					font-weight: 500;
				}
			}
		}
		button {
			min-width: 4.5rem;
		}
		&:last-child {
			border-bottom: none;
		}
	}
}

.setting-item-description {
	color: var(--text-muted);
	font-size: var(--font-ui-smaller);
	margin: 0.25rem 0 0.75rem;
	line-height: 1.3;
	a {
		color: var(--text-muted);
		@media (hover: hover) {
			&:hover {
				color: var(--text-accent);
			}
		}
	}
	&:empty {
		display: none;
	}
}

#sidebar {
	background-color: var(--background-secondary);
	width: 25%;
	overflow: scroll;
	min-width: 200px;
	max-width: 300px;
	flex-shrink: 0;
	border-inline-end: 1px solid var(--background-modifier-border);
	padding: 0 16px 24px 16px;

	.is-mobile & {
		background-color: var(--background-primary);
	}

	.sidebar-heading {
		font-weight: 500;
		margin-top: 16px;
		pointer-events: none;
		color: var(--text-faint);
		font-size: var(--font-ui-smaller);
	}

	ul {
		font-size: var(--font-ui-small);
		list-style-type: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;

		.is-mobile & {
			font-size: var(--font-ui-medium);
		}
		li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			cursor: pointer;
			padding: 0.25rem 0.375rem;
			border-radius: var(--radius-s);
			user-select: none;
			-webkit-user-select: none;

			@media (hover: hover) {
				&:hover {
					background-color: var(--background-modifier-hover);
				}
			}
			&.active {
				background-color: var(--background-modifier-hover);
				color: var(--text-normal);
			}
		}
	}

	#new-template-btn {
		width: calc(100% - 12px);
		margin: 0.5rem 0.375rem;
	}

	#template-list {
		padding: 0.5rem 0.375rem;

		li {
			.template-name {
				flex-grow: 1;
				margin-right: auto;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-inline-end: 4px;
			}
			.delete-template-btn {
				flex-shrink: 1;
				background: none;
				border: none;
				cursor: pointer;
				padding: 2px;
				color: var(--text-muted);
				opacity: 0;
				margin: -6px;
				box-shadow: none;

				
			}
			&.active,
			&:hover {
				.delete-template-btn {
					opacity: 0.7;
					&:hover {
						opacity: 1;
					}
				}
			}
		}
	}
}

#general-settings-form {
	#keyboard-shortcuts-list {
		display: flex;
		flex-direction: column;
		margin-top: 0.5rem;
	}

	#vault-list {
		display: flex;
		flex-direction: column;
		margin: 0.5rem 0 1.5rem;
		padding: 0;
		li {
			user-select: none;
			-webkit-user-select: none;
			display: flex;
			flex-direction: row;
			gap: 0.25rem;
			padding: 2px 0;
			align-items: center;
			font-size: var(--font-ui-small);
			border-bottom: 1px solid var(--background-modifier-border);
			button {
				margin-left: auto;
				width: auto;
			}
		}
	}
	.shortcut-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--background-modifier-border);
		span {
			font-size: var(--font-ui-small);
		}
		.setting-hotkey {
			background-color: var(--background-secondary);
			padding: 0.125rem 0.5rem;
			border-radius: var(--radius-s);
			font-size: var(--font-ui-smaller);
		}
	}
}

.is-firefox-mobile,
.is-mobile-safari {
	#hotkeys-subsection {
		display: none;
	}
}

:root {
	--settings-section-height-mobile: calc(100vh - var(--safe-area-inset-bottom) - 3rem);
}

@supports (height: 100dvh) {
	.is-mobile-safari {
		--settings-section-height-mobile: calc(100dvh - 3rem);
	}
}

@media (max-width: 768px) {
	#settings {
		#settings-container {
			min-height: 100vh;
			overflow: hidden;
		}
		#navbar {
			padding: 0 1.5rem;
			width: 100%;
			display: flex;
			height: 3rem;
			min-height: 3rem;
			background-color: var(--background-primary);

			.hamburger-menu {
				display: block;
			}
		}
		.settings-section {
			margin: 0;
			padding: 1.5rem 1.5rem 3rem;
			height: var(--settings-section-height-mobile);
			overflow: scroll;
			-webkit-overflow-scrolling: touch;
		}

		#content {
			display: flex;
			flex-direction: column;
			overflow:hidden;
			height: 100vh;
		}
		#sidebar {
			width: 100%;
			max-width: 100%;
			display: none;
			position: absolute;
			top: 3rem;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 10;
		}

		&.sidebar-open {
			#sidebar {
				display: block;
			}

			.hamburger-menu {
				-webkit-tap-highlight-color: transparent;
				.hamburger-icon {
					background-color: transparent;

					&::before,
					&::after {
						top: 0;
					}
					&::before {
						transform: rotate(45deg);
					}
					&::after {
						transform: rotate(-45deg);
					}
				}
			}
		}
	}
}